import { Segmented } from "antd";
import { useState } from "react";
import { useComponentsStore } from "@/stores/edit-pages-store";
import { ComponentAttr } from "./ComponentAttr";
import { ComponentStyle } from "./ComponentStyle";
import { ComponentEvent } from "./ComponentEvent";

export function Setting() {
  const { curComponentId, curComponent } = useComponentsStore();
  const [key, setKey] = useState<string>("属性");

  return (
    <div className="h-full flex flex-col ">
      <Segmented value={key} onChange={setKey} block options={["属性", "样式", "事件"]} className="m-[2px]" />
      {curComponentId && curComponent && (
        <div className="flex-1 h-20 overflow-y-auto">
          {key === "属性" && <ComponentAttr />}
          {key === "样式" && <ComponentStyle />}
          {key === "事件" && <ComponentEvent />}
        </div>
      )}
    </div>
  );
}
